<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜单配置 | vue-next-admin</title>
    
    <meta name="generator" content="VitePress v1.6.3">
    <link rel="preload stylesheet" href="/vue-next-admin-doc-preview/assets/style.Brpq300p.css" as="style">
    <link rel="preload stylesheet" href="/vue-next-admin-doc-preview/vp-icons.css" as="style">
    
    <script type="module" src="/vue-next-admin-doc-preview/assets/app.BSorFS4w.js"></script>
    <link rel="preload" href="/vue-next-admin-doc-preview/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/chunks/theme.D_-w8-Et.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/chunks/framework.JQJLXAcz.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/config_menu_index.md.3wChSrOV.lean.js">
    <link rel="icon" href="/vue-next-admin-doc-preview/images/favicon.ico">
    <meta name="keywords" content="doc、vue-next-admin、vue-next-admin-doc、vue3、element-plus、vuejs/vue-next">
    <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
    <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?dd9ada7b25f65a181a42780f04b764e6";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-e6e9343e><!--[--><!--]--><!--[--><span tabindex="-1" data-v-518ab264></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-518ab264>Skip to content</a><!--]--><!----><header class="VPNav" data-v-e6e9343e data-v-fcd341ad><div class="VPNavBar" data-v-fcd341ad data-v-109f5bed><div class="wrapper" data-v-109f5bed><div class="container" data-v-109f5bed><div class="title" data-v-109f5bed><div class="VPNavBarTitle has-sidebar" data-v-109f5bed data-v-1ce8aa9a><a class="title" href="/vue-next-admin-doc-preview/" data-v-1ce8aa9a><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vue-next-admin-doc-preview/images/logo-mini.svg" alt data-v-3a7f1e1a><!--]--><span data-v-1ce8aa9a>vue-next-admin</span><!--[--><!--]--></a></div></div><div class="content" data-v-109f5bed><div class="content-body" data-v-109f5bed><!--[--><!--]--><div class="VPNavBarSearch search" data-v-109f5bed><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-109f5bed data-v-1b1a6c0b><span id="main-nav-aria-label" class="visually-hidden" data-v-1b1a6c0b> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/home/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vue-next-admin-doc-preview/config/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>配置</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>集成后端</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zuohuaijun/Admin.NET" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zuohuaijun Admin.NET</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@熊猫 PandaGoAdmin</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://toscode.gitee.com/GionConnection/gopro_free" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@甜蜜蜜 GoPro平台</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/GionConnection/niupi-free" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@甜蜜蜜 NiuPi 平台</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/tiger1103/gfast/tree/os-v3/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@游子 GFast-V3</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/diygw/diygw-ui-php/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@diygw.com gw-ui-php</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zsvg/vboot-net" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zsvg vboot-net</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zsvg/vboot-java" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zsvg vboot-java</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@青红造了个白 buildadmin</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/xiaodingding/iotfast" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@Goodwell iotfast(一个开源的物联网平台)</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>演示 & 仓库</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuGroup" data-v-c7a754f7 data-v-8c65019a><p class="title" data-v-8c65019a>⛱️ 线上演示</p><!--[--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="http://vuenextadmin.ccfast.cc/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue3.x 版本预览（vue-next-admin）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue2.x 版本预览（vue-prev-admin）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://lyt-top.gitee.io/vue-next-admin-shop-preview" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue3 + uni-app 商城（vue-next-admin-shop）</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-c7a754f7 data-v-8c65019a><p class="title" data-v-8c65019a>💒 代码仓库</p><!--[--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>gitee（国内：实时更新）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>github（国外：定期更新）</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>日志 & 文档</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>更新日志</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>文档仓库</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/support/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>赞助</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/shop/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>商城</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-109f5bed data-v-c3b75e45><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-c3b75e45 data-v-bd8da54f data-v-1587fe0b><span class="check" data-v-1587fe0b><span class="icon" data-v-1587fe0b><!--[--><span class="vpi-sun sun" data-v-bd8da54f></span><span class="vpi-moon moon" data-v-bd8da54f></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-109f5bed data-v-36a09a39 data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-bccf8a2a><span class="vpi-more-horizontal icon" data-v-bccf8a2a></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><!----><!--[--><!--[--><!----><div class="group" data-v-36a09a39><div class="item appearance" data-v-36a09a39><p class="label" data-v-36a09a39>Appearance</p><div class="appearance-action" data-v-36a09a39><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-36a09a39 data-v-bd8da54f data-v-1587fe0b><span class="check" data-v-1587fe0b><span class="icon" data-v-1587fe0b><!--[--><span class="vpi-sun sun" data-v-bd8da54f></span><span class="vpi-moon moon" data-v-bd8da54f></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-109f5bed data-v-01e8b504><span class="container" data-v-01e8b504><span class="top" data-v-01e8b504></span><span class="middle" data-v-01e8b504></span><span class="bottom" data-v-01e8b504></span></span></button></div></div></div></div><div class="divider" data-v-109f5bed><div class="divider-line" data-v-109f5bed></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-e6e9343e data-v-19ebc9ec><div class="container" data-v-19ebc9ec><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-19ebc9ec><span class="vpi-align-left menu-icon" data-v-19ebc9ec></span><span class="menu-text" data-v-19ebc9ec>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-19ebc9ec data-v-f4d555a5><button data-v-f4d555a5>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-e6e9343e data-v-3048e0f0><div class="curtain" data-v-3048e0f0></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3048e0f0><span class="visually-hidden" id="sidebar-aria-label" data-v-3048e0f0> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible has-active" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>简介</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/menu/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>菜单配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/layoutConfig/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>布局配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/iconfont/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>字体图标</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/server/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>服务端交互</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/vuex/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>vuex</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/build/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>打包预览</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>高级</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/power/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>权限管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/route/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>路由参数</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/i18n/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>国际化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/tagsView/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>标签页</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/directive/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>内置指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>其它</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/charts/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>数据可视化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/tool/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>工具类集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/partyPlug/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>第三方插件使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/builtPlug/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>内置插件的使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/otherIssues/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>其它问题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-e6e9343e data-v-1b0e1204><div class="VPDoc has-sidebar has-aside" data-v-1b0e1204 data-v-1bc29d7c><!--[--><!--]--><div class="container" data-v-1bc29d7c><div class="aside" data-v-1bc29d7c><div class="aside-curtain" data-v-1bc29d7c></div><div class="aside-container" data-v-1bc29d7c><div class="aside-content" data-v-1bc29d7c><div class="VPDocAside" data-v-1bc29d7c data-v-9a0c0521><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-9a0c0521 data-v-678806e9><div class="content" data-v-678806e9><div class="outline-marker" data-v-678806e9></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-678806e9>导航目录</div><ul class="VPDocOutlineItem root" data-v-678806e9 data-v-4569cf74><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-9a0c0521></div><!--[--><!--[--><!--[--><!--[--><div class="VPDocAsideSponsors"><div class="VPSponsors vp-sponsor aside"><!--[--><section class="vp-sponsor-section"><!----><div class="VPSponsorsGrid vp-sponsor-grid mini"><!--[--><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" href="http://www.ccflow.org/" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden">驰骋流程+表单+低代码</h4><img class="vp-sponsor-grid-image" src="/vue-next-admin-doc-preview/images/ccflowRightNextAdmin.png" alt="驰骋流程+表单+低代码"></article></a></div><!--]--></div></section><!--]--></div></div><!--]--><!--]--><!--]--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-1bc29d7c><div class="content-container" data-v-1bc29d7c><!--[--><!--]--><main class="main" data-v-1bc29d7c><div style="position:relative;" class="vp-doc _vue-next-admin-doc-preview_config_menu_" data-v-1bc29d7c><div><h1 id="菜单配置" tabindex="-1">菜单配置 <a class="header-anchor" href="#菜单配置" aria-label="Permalink to &quot;菜单配置&quot;">​</a></h1><div class="tip custom-block"><p class="custom-block-title">温馨提示</p><p>先不着急上手，首先得了解各参数字段是啥意思，菜单路径地址：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a>。也可看对应的 <a href="https://next.router.vuejs.org/zh/api/#beforeenter" target="_blank" rel="noreferrer">next.router API 参考文档</a> ❤️。</p><ul><li><p>前端控制：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a> 修改菜单数据</p></li><li><p>后端控制：需先去 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/stores/themeConfig.ts#L133" target="_blank" rel="noreferrer">/src/stores/themeConfig.ts</a> 下开启 <code>isRequestRoutes: true</code>，然后去 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/api/menu/index.ts" target="_blank" rel="noreferrer">/@/api/menu/index.ts</a> 中修改接口拿菜单数据</p></li></ul></div><p>以下内容为国际化，想了解更多，请移步 <a href="/vue-next-admin-doc-preview/config/i18n/">高级-国际化</a></p><h2 id="参数说明" tabindex="-1">参数说明 <a class="header-anchor" href="#参数说明" aria-label="Permalink to &quot;参数说明&quot;">​</a></h2><p>代码位置：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a></p><p>菜单路由中的字段说明</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 菜单路径，用于跳转</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/home&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 菜单 name，用于界面 keep-alive 路由缓存。</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 此 name 需要与 component 组件中的 name 值相同（唯一）</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;home&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 组件路径</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/views/home/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 附加自定义数据</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 菜单标题（国际化写法）</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message.router.home&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 菜单外链链接</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 开启外链条件，`1、isLink: true 2、链接地址不为空（meta.isLink） 3、isIframe: false`</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isLink</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 菜单是否隐藏（菜单不显示在界面，但可以进行跳转）</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isHide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 菜单是否缓存</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isKeepAlive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 菜单是否固定（固定在 tagsView 中，不可进行关闭），右键菜单无 `关闭` 项</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isAffix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 是否内嵌</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 开启条件，`1、isIframe: true 2、链接地址不为空（meta.isLink）`</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isIframe</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 之前 auth 取用户（角色下有多个用户）</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    roles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;admin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 菜单图标</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;iconfont icon-shouye&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 自行再添加</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="菜单格式" tabindex="-1">菜单格式 <a class="header-anchor" href="#菜单格式" aria-label="Permalink to &quot;菜单格式&quot;">​</a></h2><p>在项目 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a> 文件中。这里需要注意，菜单数据内容必须嵌套进顶级节点（作为顶级路由出口）的 <code>children</code> 字段里</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 顶级菜单路径</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 顶级菜单 name</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 顶级路由出口</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/layout/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 顶级菜单重定向路径</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  redirect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/home&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 顶级附加自定义数据</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 顶级菜单是否缓存</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isKeepAlive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 顶级菜单的子级菜单数据</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  children</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 新增的菜单对象写在这里</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="路径格式" tabindex="-1">路径格式 <a class="header-anchor" href="#路径格式" aria-label="Permalink to &quot;路径格式&quot;">​</a></h2><h3 id="_1-面包屑多级显示" tabindex="-1">1. 面包屑多级显示 <a class="header-anchor" href="#_1-面包屑多级显示" aria-label="Permalink to &quot;1. 面包屑多级显示&quot;">​</a></h3><p>在项目 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a> 文件中，观察 <code>path</code> 字段，有 <code>children</code> 时，<code>path</code> 字段是基于上一级继续拼接（为什么这样？详看 <a href="/vue-next-admin-doc-preview/config/layoutConfig/#breadcrumb-面包屑">布局配置-breadcrumb-面包屑</a>）。</p><p>如下所示：<code>/params/xxx</code>，这样做是为了 <code>breadcrumb-面包屑</code> 的显示问题。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/params&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  redirect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/params/common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  children</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 面包屑：首页 / 路由参数 / 普通路由</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/params/common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 面包屑：首页 / 路由参数 / 普通路由 / 普通路由详情</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/params/common/details&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_2-面包屑单级显示" tabindex="-1">2. 面包屑单级显示 <a class="header-anchor" href="#_2-面包屑单级显示" aria-label="Permalink to &quot;2. 面包屑单级显示&quot;">​</a></h3><p><code>children</code> 里的 <code>path</code> 不基于上级 <code>path</code>，注意高亮部分代码的 <code>path</code></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/params&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  redirect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/params/common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  children</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 面包屑：首页 / 路由参数 / 普通路由</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/params/common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 面包屑：首页 / 路由参数 / 普通路由详情</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/params/details&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 面包屑：首页</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/params1/common1/details&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="一级菜单" tabindex="-1">一级菜单 <a class="header-anchor" href="#一级菜单" aria-label="Permalink to &quot;一级菜单&quot;">​</a></h2><h3 id="_1-新建文件夹" tabindex="-1">1. 新建文件夹 <a class="header-anchor" href="#_1-新建文件夹" aria-label="Permalink to &quot;1. 新建文件夹&quot;">​</a></h3><ul><li>一般情况下，我们添加菜单时，代码都是在编译中（cnpm run dev）。所以我们先新增文件夹，后再添加代码到 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a> 文件中，防止需要重新再运行项目。<code>/@/views</code> 下新增 <code>personal</code> 文件夹</li></ul><div class="img-style-100"><p><img src="https://i.hd-r.cn/8e977eabef05c8b4b255799ac4957bd2.png" alt="https://i.hd-r.cn/8e977eabef05c8b4b255799ac4957bd2.png" data-fancybox="gallery"></p></div><ul><li>index.vue，注意 <code>name</code> 值需与 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a> 中的 <code>name</code> 值一致，否则实现不了路由的缓存（keep-alive）</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;personal&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    personal</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;personal&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { reactive, toRefs } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义变量内容</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> reactive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scss&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.personal {}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_2-新增路由代码" tabindex="-1">2. 新增路由代码 <a class="header-anchor" href="#_2-新增路由代码" aria-label="Permalink to &quot;2. 新增路由代码&quot;">​</a></h3><p>在项目 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a> 文件中，需写在 <code>children</code> 字段里，比如我们上面添加个人中心界面，新增如下代码：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/layout/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  redirect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/home&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isKeepAlive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  children</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 新增的菜单对象写在这里</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/personal&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;personal&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/views/personal/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      meta: {</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message.router.personal&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isLink: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isHide: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isKeepAlive: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isAffix: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isIframe: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        roles: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;admin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;iconfont icon-gerenzhongxin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_3-界面显示效果" tabindex="-1">3. 界面显示效果 <a class="header-anchor" href="#_3-界面显示效果" aria-label="Permalink to &quot;3. 界面显示效果&quot;">​</a></h3><p>去 <code>http://localhost:8888/</code> 中查看显示效果，如下：</p><div class="img-style-100"><p><img src="https://i.hd-r.cn/97c1313ce849a9a909561f37dfb94677.png" alt="https://i.hd-r.cn/97c1313ce849a9a909561f37dfb94677.png" data-fancybox="gallery"></p></div><h2 id="二级菜单" tabindex="-1">二级菜单 <a class="header-anchor" href="#二级菜单" aria-label="Permalink to &quot;二级菜单&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">二级菜单与一级菜单的区别：（只要子级里有 <code>children</code>）</p><ul><li><p>1、redirect：顶级设置重定向</p></li><li><p>2、component：顶级为 <code>component: () =&gt; import(&#39;/@/layout/routerView/parent.vue&#39;)</code> 写死路径。<code>component: () =&gt; import(&#39;/@/layout/routerView/parent.vue&#39;)</code> 为路由出口</p></li></ul></div><h3 id="_1-新建文件夹-同一级菜单" tabindex="-1">1. 新建文件夹（同一级菜单） <a class="header-anchor" href="#_1-新建文件夹-同一级菜单" aria-label="Permalink to &quot;1. 新建文件夹（同一级菜单）&quot;">​</a></h3><ul><li>我们按照建 <code>一级菜单</code> 的步骤建 <code>二级菜单</code>。<code>/@/views</code> 下新增 <code>system</code> 文件夹。<code>system</code> 文件夹下新增 <code>menu、user</code> 等文件夹</li></ul><div class="img-style-100"><p><img src="https://i.hd-r.cn/fc319a4fef52d39938390f8151100704.png" alt="https://i.hd-r.cn/fc319a4fef52d39938390f8151100704.png" data-fancybox="gallery"></p></div><ul><li>为了方便管理，我们在 <code>/@/views/system/menu</code> 或 <code>/@/views/system/user</code> 中都添加 <code>index.vue</code> 组件</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;system-menu-container&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    systemMenu</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;systemMenu&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { reactive } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义变量内容</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> reactive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scss&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.system-menu-container {}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_2-新增路由代码-同一级菜单" tabindex="-1">2. 新增路由代码（同一级菜单） <a class="header-anchor" href="#_2-新增路由代码-同一级菜单" aria-label="Permalink to &quot;2. 新增路由代码（同一级菜单）&quot;">​</a></h3><p>在项目 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a> 文件中，比如我们上面添加系统设置界面，</p><p>新增如下代码：代码有点长，可复制粘贴代码到 <a href="https://tool.oschina.net/codeformat/json/" target="_blank" rel="noreferrer">OSCHINA 在线代码格式化</a> 中具体查看</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/layout/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  redirect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/home&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isKeepAlive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  children</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 新增的菜单对象写在这里</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/system&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;system&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 2、顶级为 `component: () =&gt; import(&#39;/@/layout/routerView/parent.vue&#39;)` 写死路径</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/layout/routerView/parent.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 1、redirect：重定向</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      redirect: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/system/menu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      meta: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message.router.system&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isLink: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isHide: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isKeepAlive: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isAffix: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isIframe: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        roles: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;admin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;iconfont icon-xitongshezhi&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      children: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/system/menu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;systemMenu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">          component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/views/system/menu/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          meta: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message.router.systemMenu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isLink: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isHide: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isKeepAlive: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isAffix: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isIframe: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            roles: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;admin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;iconfont icon-caidan&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/system/user&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;systemUser&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">          component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/views/system/user/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          meta: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message.router.systemUser&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isLink: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isHide: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isKeepAlive: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isAffix: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isIframe: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            roles: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;admin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;iconfont icon-icon-&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_3-界面显示效果-同一级菜单" tabindex="-1">3. 界面显示效果（同一级菜单） <a class="header-anchor" href="#_3-界面显示效果-同一级菜单" aria-label="Permalink to &quot;3. 界面显示效果（同一级菜单）&quot;">​</a></h3><p>去 <code>http://localhost:8888/</code> 中查看显示效果，如下：</p><div class="img-style-100"><p><img src="https://i.hd-r.cn/233b7cec76dac5610d35d451cb82688b.png" alt="https://i.hd-r.cn/233b7cec76dac5610d35d451cb82688b.png" data-fancybox="gallery"></p></div><h2 id="多级嵌套菜单写法" tabindex="-1">多级嵌套菜单写法 <a class="header-anchor" href="#多级嵌套菜单写法" aria-label="Permalink to &quot;多级嵌套菜单写法&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">多级嵌套菜单与二级菜单的区别：（只要子级里有 <code>children</code>）</p><ul><li><p>1、redirect：顶级设置重定向</p></li><li><p>2、component：只要当前级（我们称为顶级）下有子级（<code>children</code>），那么当前级为 <code>component: () =&gt; import(&#39;/@/layout/routerView/parent.vue&#39;)</code> 写死路径</p></li></ul></div><h3 id="_1-新建文件夹-同二级菜单" tabindex="-1">1. 新建文件夹（同二级菜单） <a class="header-anchor" href="#_1-新建文件夹-同二级菜单" aria-label="Permalink to &quot;1. 新建文件夹（同二级菜单）&quot;">​</a></h3><p>参考 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts#L80" target="_blank" rel="noreferrer">route.ts menu 的嵌套格式</a></p><ul><li>我们按照建 <code>二级菜单</code> 的步骤建 <code>多级嵌套菜单</code>。<code>/@/views</code> 下新增 <code>menu</code> 文件夹。<code>menu</code> 文件夹下新增 <code>menu1</code> 等文件夹，<code>menu1</code> 文件夹下新增 <code>menu12</code> 等。</li></ul><div class="img-style-100"><p><img src="https://i.hd-r.cn/871f2c6abd5398c4887060a8b3596ea6.png" alt="https://i.hd-r.cn/871f2c6abd5398c4887060a8b3596ea6.png" data-fancybox="gallery"></p></div><ul><li>组件代码参考 <a href="/vue-next-admin-doc-preview/config/menu/#二级菜单">/config/menu/#二级菜单</a></li></ul><h3 id="_2-新增路由代码-同二级菜单" tabindex="-1">2. 新增路由代码（同二级菜单） <a class="header-anchor" href="#_2-新增路由代码-同二级菜单" aria-label="Permalink to &quot;2. 新增路由代码（同二级菜单）&quot;">​</a></h3><p>在项目 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a> 文件中，比如我们上面添加系统设置界面，</p><p>新增如下代码：代码有点长，可复制粘贴代码到 <a href="https://tool.oschina.net/codeformat/json/" target="_blank" rel="noreferrer">OSCHINA 在线代码格式化</a> 中具体查看</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;menu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/layout/routerView/parent.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  redirect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message.router.menu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isLink</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isHide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isKeepAlive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isAffix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isIframe</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    roles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;admin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;iconfont icon-caidan&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  children</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;menu1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/layout/routerView/parent.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      redirect: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1/menu11&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      meta: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message.router.menu1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isLink: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isHide: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isKeepAlive: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isAffix: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        isIframe: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        roles: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;admin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;iconfont icon-caidan&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      children: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1/menu12&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;menu12&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">          component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/layout/routerView/parent.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          redirect: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1/menu12/menu121&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          meta: {</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message.router.menu12&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isLink: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isHide: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isKeepAlive: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isAffix: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            isIframe: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            roles: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;admin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;iconfont icon-caidan&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          children: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1/menu12/menu121&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;menu121&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">              component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/views/menu/menu1/menu12/menu121/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              meta: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message.router.menu121&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                isLink: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                isHide: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                isKeepAlive: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                isAffix: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                isIframe: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                roles: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;admin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;common&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;iconfont icon-caidan&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_3-界面显示效果-同二级菜单" tabindex="-1">3. 界面显示效果（同二级菜单） <a class="header-anchor" href="#_3-界面显示效果-同二级菜单" aria-label="Permalink to &quot;3. 界面显示效果（同二级菜单）&quot;">​</a></h3><p>去 <code>http://localhost:8888/</code> 中查看显示效果，如下：</p><div class="img-style-100"><p><img src="https://i.hd-r.cn/1c5b991ed37874664b77184bf26e03ea.png" alt="https://i.hd-r.cn/1c5b991ed37874664b77184bf26e03ea.png" data-fancybox="gallery"></p></div><h2 id="后端接口菜单" tabindex="-1">后端接口菜单 <a class="header-anchor" href="#后端接口菜单" aria-label="Permalink to &quot;后端接口菜单&quot;">​</a></h2><h3 id="_1-菜单格式" tabindex="-1">1. 菜单格式 <a class="header-anchor" href="#_1-菜单格式" aria-label="Permalink to &quot;1. 菜单格式&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">参考 gitee 模拟数据</p><p><a href="https://gitee.com/lyt-top/vue-next-admin-images/blob/master/menu/adminMenu.json" target="_blank" rel="noreferrer">菜单数据格式：https://gitee.com/lyt-top/vue-next-admin-images/blob/master/menu/adminMenu.json</a></p></div><ul><li>前面我们已经说了，<a href="/vue-next-admin-doc-preview/config/menu/#菜单格式">菜单格式</a>，菜单数据内容必须嵌套进顶级节点的 <code>children</code> 字段里，所以我们后端返回的菜单格式，只需要返回顶级节点 <code>children</code> 数组即可。</li></ul><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;code&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;type&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;adminMenu&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;data&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      &quot;path&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/home&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      &quot;name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;home&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      &quot;component&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;home/index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      &quot;meta&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        &quot;title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;message.router.home&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        &quot;isLink&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        &quot;isHide&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        &quot;isKeepAlive&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        &quot;isAffix&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        &quot;isIframe&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        &quot;roles&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;admin&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;common&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        &quot;icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;iconfont icon-shouye&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 其它菜单数据</span></span>
<span class="line"><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">      ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li>需要注意 <code>component</code> 字段为字符串而非函数，上面高亮位置处。这里为什么不写成 <code>&quot;component&quot;: &quot;/home/index.vue&quot;</code>，请继续往下看 <code>二、逻辑处理</code></li></ul><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;component&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;home/index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span></code></pre></div><ul><li><code>component</code> 例子演示，如嵌套菜单（文档已简写，真实请补满其它参数）：</li></ul><div class="tip custom-block"><p class="custom-block-title">对比发现</p><ul><li><p>1、layout：以 <code>layout</code> 开头的话，去掉了 <code>/@/</code> 及 <code>.vue</code> 后缀</p></li><li><p>2、views：以 <code>views</code> 开头的话，去掉了 <code>/@/views/</code> 及 <code>.vue</code> 后缀</p></li></ul></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 默认菜单格式</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/layout/routerView/parent.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  redirect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  children</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/layout/routerView/parent.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      redirect: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1/menu11&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      children: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1/menu11&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;menu11&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">          component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/@/views/menu/menu1/menu11/index.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 后端返回菜单格式</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;layout/routerView/parent&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  redirect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  children</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      component: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;layout/routerView/parent&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      redirect: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1/menu11&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      children: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/menu/menu1/menu11&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;menu11&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          component: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;menu/menu1/menu11/index&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_2-逻辑处理" tabindex="-1">2. 逻辑处理 <a class="header-anchor" href="#_2-逻辑处理" aria-label="Permalink to &quot;2. 逻辑处理&quot;">​</a></h3><p>后端控制逻辑代码 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/backEnd.ts" target="_blank" rel="noreferrer">/@/router/backEnd.ts</a></p><ul><li>Glob 导入，Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块。具体查看 <a href="https://vitejs.cn/guide/features.html#glob-import" target="_blank" rel="noreferrer">vite Glob 导入文档</a>。</li></ul><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> layouModules</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">glob</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;../layout/routerView/*.{vue,tsx}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> viewsModules</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">glob</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;../views/**/*.{vue,tsx}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><ul><li>把 component 中的路径字符串转成实际组件地址，通过以下方法进行转换</li></ul><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * 后端路由 component 转换</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> routes</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 后端返回的路由表数组</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@returns</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 返回处理成函数后的 component</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backEndComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">routes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">routes) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> routes.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (item.component)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      item.component </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dynamicImport</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        dynamicViewsModules,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        item.component </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      );</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    item.children </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backEndComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(item.children);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * 后端路由 component 转换函数</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dynamicViewsModules</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 获取目录下的 .vue、.tsx 全部文件</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> component</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 当前要处理项 component</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@returns</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 返回处理成函数后的 component</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dynamicImport</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  dynamicViewsModules</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;,</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  component</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> keys</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dynamicViewsModules);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> matchKeys</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> keys.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> k</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> key.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">replace</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">..</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\/</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">views</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">..</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> k.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">startsWith</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">component</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> k.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">startsWith</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`/${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">component</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (matchKeys?.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> matchKey</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> matchKeys[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dynamicViewsModules[matchKey];</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (matchKeys?.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li>转换完成再重新赋值给 <a href="/vue-next-admin-doc-preview/config/menu/#菜单格式">菜单格式</a>，<code>children</code> 字段里</li></ul><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// res.data 为链接</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/backEnd.ts</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 的菜单模拟数据</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> dynamicRoutes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backEndComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(res.data);</span></span></code></pre></div><h2 id="路由缓存" tabindex="-1">路由缓存 <a class="header-anchor" href="#路由缓存" aria-label="Permalink to &quot;路由缓存&quot;">​</a></h2><p>路由菜单中的 <code>name</code> 需与组件的 <code>name</code> 相同且 <code>唯一</code>，还有 <code>meta.isKeepAlive</code> 设为 <code>true</code></p><h3 id="_1-路由菜单设置-name-值" tabindex="-1">1. 路由菜单设置 <code>name</code> 值 <a class="header-anchor" href="#_1-路由菜单设置-name-值" aria-label="Permalink to &quot;1. 路由菜单设置 `name` 值&quot;">​</a></h3><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/home&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;home&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_2-组件中设置-name-值" tabindex="-1">2. 组件中设置 <code>name</code> 值 <a class="header-anchor" href="#_2-组件中设置-name-值" aria-label="Permalink to &quot;2. 组件中设置 `name` 值&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;home&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 这里写点内容，防止空内容报错</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_3-meta-iskeepalive" tabindex="-1">3. <code>meta.isKeepAlive</code> <a class="header-anchor" href="#_3-meta-iskeepalive" aria-label="Permalink to &quot;3. `meta.isKeepAlive`&quot;">​</a></h3><p>代码路径：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noreferrer">/@/router/route.ts</a></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    isKeepAlive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-1bc29d7c data-v-7922fe7a><!--[--><!--]--><div class="edit-info" data-v-7922fe7a><div class="edit-link" data-v-7922fe7a><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/docs/config/menu/index.md" target="_blank" rel="noreferrer" data-v-7922fe7a><!--[--><span class="vpi-square-pen edit-link-icon" data-v-7922fe7a></span> 欢迎到 Gitee 上编辑此页<!--]--></a></div><div class="last-updated" data-v-7922fe7a><p class="VPLastUpdated" data-v-7922fe7a data-v-f919ac01>上次更新: <time datetime="2023-03-27T07:54:21.000Z" data-v-f919ac01></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-7922fe7a><span class="visually-hidden" id="doc-footer-aria-label" data-v-7922fe7a>Pager</span><div class="pager" data-v-7922fe7a><a class="VPLink link pager-link prev" href="/vue-next-admin-doc-preview/config/" data-v-7922fe7a><!--[--><span class="desc" data-v-7922fe7a>上一页</span><span class="title" data-v-7922fe7a>简介</span><!--]--></a></div><div class="pager" data-v-7922fe7a><a class="VPLink link pager-link next" href="/vue-next-admin-doc-preview/config/layoutConfig/" data-v-7922fe7a><!--[--><span class="desc" data-v-7922fe7a>下一页</span><span class="title" data-v-7922fe7a>布局配置</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-e6e9343e data-v-d3e003fa><div class="container" data-v-d3e003fa><p class="message" data-v-d3e003fa>根据 MIT 许可证发布</p><p class="copyright" data-v-d3e003fa>本文档内容版权为 vue-next-admin 作者所有，保留所有权利。</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"config_build_index.md\":\"D66wEP1j\",\"config_builtplug_index.md\":\"D2vmqGsI\",\"config_charts_index.md\":\"AKJZmCTu\",\"config_directive_index.md\":\"BknO8zbE\",\"config_i18n_index.md\":\"CEUZIFAO\",\"config_iconfont_index.md\":\"CwSwNiIL\",\"config_index.md\":\"BWWh4uPI\",\"config_layoutconfig_index.md\":\"y3w-TjAE\",\"config_menu_index.md\":\"3wChSrOV\",\"config_otherissues_index.md\":\"BOPxKpRj\",\"config_partyplug_index.md\":\"C8yqZf2d\",\"config_power_index.md\":\"Ck6Qtvrt\",\"config_route_index.md\":\"Bh5Jr5_u\",\"config_server_index.md\":\"BlrltGMx\",\"config_tagsview_index.md\":\"T-3O6iEI\",\"config_tool_index.md\":\"BD422M9a\",\"config_vuex_index.md\":\"BlaPjLAQ\",\"home_compatible_index.md\":\"3OXuA7v8\",\"home_doc_index.md\":\"C45XHwz0\",\"home_eslint_index.md\":\"DaE-VgkK\",\"home_fast_index.md\":\"Cvjlg4iK\",\"home_forpeople_index.md\":\"FmtZKjE-\",\"home_gitpush_index.md\":\"4PZJWbVF\",\"home_index.md\":\"5dmU-wlV\",\"home_install_index.md\":\"B0F5JJzW\",\"home_introduce_index.md\":\"CXcs-Z1z\",\"home_prettier_index.md\":\"Cv6odTsh\",\"home_thank_index.md\":\"B-DzVr5x\",\"home_vscode_index.md\":\"Bowdae-M\",\"index.md\":\"B79oanHt\",\"shop_index.md\":\"PQuQh6BV\",\"support_index.md\":\"C3lVrH0L\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"vue-next-admin\",\"description\":\"🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档\",\"base\":\"/vue-next-admin-doc-preview/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/images/logo-mini.svg\",\"search\":{\"provider\":\"local\"},\"outlineTitle\":\"导航目录\",\"outline\":\"deep\",\"lastUpdatedText\":\"上次更新\",\"editLink\":{\"pattern\":\"https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/docs/:path\",\"text\":\"欢迎到 Gitee 上编辑此页\"},\"author\":\"lyt_20201208\",\"footer\":{\"message\":\"根据 MIT 许可证发布\",\"copyright\":\"本文档内容版权为 vue-next-admin 作者所有，保留所有权利。\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"指南\",\"link\":\"/home/\",\"activeMatch\":\"/home/\"},{\"text\":\"配置\",\"link\":\"/config/\",\"activeMatch\":\"/config/\"},{\"text\":\"集成后端\",\"items\":[{\"text\":\"@zuohuaijun Admin.NET\",\"link\":\"https://gitee.com/zuohuaijun/Admin.NET\"},{\"text\":\"@熊猫 PandaGoAdmin\",\"link\":\"https://github.com/PandaGoAdmin/PandaX\"},{\"text\":\"@甜蜜蜜 GoPro平台\",\"link\":\"https://toscode.gitee.com/GionConnection/gopro_free\"},{\"text\":\"@甜蜜蜜 NiuPi 平台\",\"link\":\"https://gitee.com/GionConnection/niupi-free\"},{\"text\":\"@游子 GFast-V3\",\"link\":\"https://gitee.com/tiger1103/gfast/tree/os-v3/\"},{\"text\":\"@diygw.com gw-ui-php\",\"link\":\"https://gitee.com/diygw/diygw-ui-php/\"},{\"text\":\"@zsvg vboot-net\",\"link\":\"https://gitee.com/zsvg/vboot-net\"},{\"text\":\"@zsvg vboot-java\",\"link\":\"https://gitee.com/zsvg/vboot-java\"},{\"text\":\"@青红造了个白 buildadmin\",\"link\":\"https://gitee.com/wonderful-code/buildadmin\"},{\"text\":\"@Goodwell iotfast(一个开源的物联网平台)\",\"link\":\"https://github.com/xiaodingding/iotfast\"}]},{\"text\":\"演示 & 仓库\",\"items\":[{\"text\":\"⛱️ 线上演示\",\"items\":[{\"text\":\"vue3.x 版本预览（vue-next-admin）\",\"link\":\"http://vuenextadmin.ccfast.cc/\"},{\"text\":\"vue2.x 版本预览（vue-prev-admin）\",\"link\":\"https://lyt-top.gitee.io/vue-prev-admin-preview/#/login\"},{\"text\":\"vue3 + uni-app 商城（vue-next-admin-shop）\",\"link\":\"https://lyt-top.gitee.io/vue-next-admin-shop-preview\"}]},{\"text\":\"💒 代码仓库\",\"items\":[{\"text\":\"gitee（国内：实时更新）\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin\"},{\"text\":\"github（国外：定期更新）\",\"link\":\"https://github.com/lyt-Top/vue-next-admin\"}]}]},{\"text\":\"日志 & 文档\",\"items\":[{\"text\":\"更新日志\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md\"},{\"text\":\"文档仓库\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin-doc\"}]},{\"text\":\"赞助\",\"link\":\"/support/\",\"activeMatch\":\"/support/\"},{\"text\":\"商城\",\"link\":\"/shop/\",\"activeMatch\":\"/shop/\"}],\"sidebar\":{\"/home/\":[{\"text\":\"入门须知\",\"collapsed\":false,\"items\":[{\"text\":\"许可\",\"link\":\"/home/\"},{\"text\":\"兼容性\",\"link\":\"/home/compatible/\"},{\"text\":\"适用人群\",\"link\":\"/home/forPeople/\"},{\"text\":\"学习文档\",\"link\":\"/home/doc/\"},{\"text\":\"特别鸣谢\",\"link\":\"/home/thank/\"}]},{\"text\":\"开发指南\",\"collapsed\":false,\"items\":[{\"text\":\"介绍\",\"link\":\"/home/introduce/\"},{\"text\":\"安装\",\"link\":\"/home/install/\"},{\"text\":\"其它\",\"link\":\"/home/fast/\"}]},{\"text\":\"代码规范\",\"collapsed\":false,\"items\":[{\"text\":\"eslint\",\"link\":\"/home/eslint/\"},{\"text\":\"prettier\",\"link\":\"/home/prettier/\"},{\"text\":\"vsCode 配置\",\"link\":\"/home/vscode/\"},{\"text\":\"git 提交规范\",\"link\":\"/home/gitPush/\"}]}],\"/config/\":[{\"text\":\"基础\",\"collapsed\":false,\"items\":[{\"text\":\"简介\",\"link\":\"/config/\"},{\"text\":\"菜单配置\",\"link\":\"/config/menu/\"},{\"text\":\"布局配置\",\"link\":\"/config/layoutConfig/\"},{\"text\":\"字体图标\",\"link\":\"/config/iconfont/\"},{\"text\":\"服务端交互\",\"link\":\"/config/server/\"},{\"text\":\"vuex\",\"link\":\"/config/vuex/\"},{\"text\":\"打包预览\",\"link\":\"/config/build/\"}]},{\"text\":\"高级\",\"collapsed\":false,\"items\":[{\"text\":\"权限管理\",\"link\":\"/config/power/\"},{\"text\":\"路由参数\",\"link\":\"/config/route/\"},{\"text\":\"国际化\",\"link\":\"/config/i18n/\"},{\"text\":\"标签页\",\"link\":\"/config/tagsView/\"},{\"text\":\"内置指令\",\"link\":\"/config/directive/\"}]},{\"text\":\"其它\",\"collapsed\":false,\"items\":[{\"text\":\"数据可视化\",\"link\":\"/config/charts/\"},{\"text\":\"工具类集合\",\"link\":\"/config/tool/\"},{\"text\":\"第三方插件使用\",\"link\":\"/config/partyPlug/\"},{\"text\":\"内置插件的使用\",\"link\":\"/config/builtPlug/\"},{\"text\":\"其它问题\",\"link\":\"/config/otherIssues/\"}]}],\"/shop/\":[{\"text\":\"首页\",\"collapsed\":false},{\"text\":\"分类\",\"collapsed\":false},{\"text\":\"服务\",\"collapsed\":false},{\"text\":\"购物车\",\"collapsed\":false},{\"text\":\"我的\",\"collapsed\":false}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>